<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<!--NewPage-->
<HTML>
<HEAD>
<TITLE>
Zapatec.BasicTree
</TITLE>
<LINK REL ="stylesheet" TYPE="text/css" HREF="../stylesheet.css" TITLE="Style">
</HEAD>
<SCRIPT>
function asd()
{
parent.document.title="Zapatec.BasicTree";
}
</SCRIPT>
<BODY BGCOLOR="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_bottom"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=3 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_bottom_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-summary.html"><FONT CLASS="NavBarFont1"><B>Overview</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">  <A HREF="../overview-summary-tree.js.html"><FONT CLASS="NavBarFont1"><B>File</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">&nbsp;<FONT CLASS="NavBarFont1Rev"><B>Class</B></FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-tree.html"><FONT CLASS="NavBarFont1"><B>Tree</B></FONT></A>&nbsp;</TD>
  <!--TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1"-->    <!--A HREF="deprecated-list.html"--><!--FONT CLASS="NavBarFont1">Deprecated</FONT--><!--/A--><!--&nbsp;</TD-->
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../index-all.html"--><FONT CLASS="NavBarFont1"><B>Index</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../help-doc.html"><FONT CLASS="NavBarFont1"><B>Help</B></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD ALIGN="right" VALIGN="top" ROWSPAN=3><EM>
<B>Zapatec Utils</B>
</EM>
</TD
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;<A HREF="../Zapatec/AccordionTabs.html"><B>PREV CLASS</B></A><!-- 
   NEXT CLASS 
-->
&nbsp;<A HREF="../Zapatec/Button.html"><B>NEXT CLASS</B></A></FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="../index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="" TARGET="_top"><B>NO FRAMES</B></A>  &nbsp;
&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
<TR>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
  SUMMARY:&nbsp;<A HREF="#field_summary">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_summary">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_summary">METHOD</A></FONT></TD>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
DETAIL:&nbsp;<A HREF="#field_detail">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_detail">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_detail">METHOD</A></FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->
<HR>

<!-- ======== START OF CLASS DATA ======== -->
<H2>Class Zapatec.BasicTree</H2>
<PRE>Object
   |
   +--<b>Zapatec.BasicTree</b>
</PRE>


<HR>
<DL>
   <!-- Class definition -->
   <DT>class 
   <B>Zapatec.BasicTree</B>
   

</DL>
   
   <P>
   <I>Defined in <a href='../overview-summary-tree.js.html'>tree.js</a></I><BR/><BR/>
   </P>
   
   <HR>

<!-- ======== NESTED CLASS SUMMARY ======== -->

<!-- ======== END NESTED CLASS SUMMARY ======== -->


<!-- =========== FIELD SUMMARY =========== -->

   <A NAME="field_summary"><!-- --></A>
      <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
         <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
            <TD COLSPAN=2><FONT SIZE="+2">
               <B>Field Summary</B></FONT></TD>
         </TR>

   <!-- This is one instance field summary -->
   
   <TR BGCOLOR="white" CLASS="TableRowColor">
   <TD ALIGN="right" VALIGN="top" WIDTH="1%"><FONT SIZE="-1">
   <CODE>&lt;static&gt; &nbsp;Object</CODE></FONT></TD>
   <TD><CODE><B><A HREF="#!s!all">all</A></B></CODE>
   <BR>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This global variable keeps a "hash table" (that is, a plain JavaScript
 object) mapping ID-s to references to Zapatec.BasicTree objects.</TD>
   </TR>
   

   </TABLE>
   &nbsp;
   

   

<!-- =========== END FIELD SUMMARY =========== -->


<!-- ======== CONSTRUCTOR SUMMARY ======== -->

<A NAME="constructor_summary"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
<TD COLSPAN=2><FONT SIZE="+2">
<B>Constructor Summary</B></FONT></TD>
</TR>
<TR BGCOLOR="white" CLASS="TableRowColor">
   <TD>
      <CODE>
	 <B>
	    <A HREF="#Zapatec.BasicTree()">Zapatec.BasicTree</A></B>(el, config)
      </CODE>
      <BR>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      The Zapatec.BasicTree object constructor.
      </TD>
</TR>
</TABLE>

<!-- ======== END CONSTRUCTOR SUMMARY ======== -->

&nbsp;

<!-- ========== METHOD SUMMARY =========== -->

<A NAME="method_summary"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
<TD COLSPAN=2><FONT SIZE="+2">
<B>Method Summary</B></FONT></TD>
</TR>


   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#_getTree">_getTree</A></B>(tree_id, dont_call)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal This function is used when "dynamic initialization" is on.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#appendChild">appendChild</A></B>(parent, newChild, atStart)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Append a child to the start or end of the given parent.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#collapseAll">collapseAll</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call this function to collapse all items in the tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#createItem">createItem</A></B>(li, parent, next_li, level, atStart)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal This function walks through a LI element and creates the HTML
 elements associated with that tree item.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#createTree">createTree</A></B>(list, parent, level)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal Function that creates a (sub)tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#destroy">destroy</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Destroys the tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#expandAll">expandAll</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call this function to expand all items in the tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#getParent">getParent</A></B>(id, mode)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call to get the parent to append, insert or remove a child either at start or end position or in between two nodes of the (sub-)tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#init">init</A></B>(el, config)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#insertBefore">insertBefore</A></B>(newChild, refChild)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 A new child can be inserted between two nodes/children or before one node /children at the same tree level.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#item_addDefaultIcon">item_addDefaultIcon</A></B>(item, className)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal This function adds a TD element having a certain class attribute
 which helps having a tree containing icons without defining IMG tags for
 each item.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#item_addIcon">item_addIcon</A></B>(item, img)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal This function does different things, depending on whether the \b
 img parameter is passed or not.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#itemClicked">itemClicked</A></B>(item_id)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 This function gets called from a global event handler when some item was
 clicked.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#makeNode">makeNode</A></B>(html, type)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call this function to create a html element with the optional element type specified.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#onItemSelect">onItemSelect</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Third party code can override this member in order to add an event handler
 that gets called each time a tree item is selected.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#removeChild">removeChild</A></B>(oldChild)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 An old child node in the tree can be removed at any level.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#sync">sync</A></B>(item_id)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call this function to synchronize the tree to a given item.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#toggleAll">toggleAll</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Call this function to toggle all items in the tree.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&nbsp;Object</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#toggleItem">toggleItem</A></B>(item_id, state)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 This function toggles an item if the \b state parameter is not specified.
      </TD>
   </TR>

   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&lt;static&gt;&nbsp;void</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#!s!onItemToggle">onItemToggle</A></B>()
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 \internal This is a global event handler that gets called when a tree item
 is clicked.
      </TD>
   </TR>


</TABLE>



<P>
<!-- ========== END METHOD SUMMARY =========== -->


<!-- ============ FIELD DETAIL START =========== -->

   <A NAME="field_detail"><!-- --></A>
   <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
      <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
         <TD COLSPAN=1><FONT SIZE="+2"><B>Field Detail</B></FONT></TD>
      </TR>
   </TABLE>

   
   <A NAME="!s!all"><!-- --></A>
   <H3>all</H3>
   <PRE>&lt;static&gt;&nbsp;Object&nbsp;<B>all</B></PRE>
   <UL>
   This global variable keeps a "hash table" (that is, a plain JavaScript
 object) mapping ID-s to references to Zapatec.BasicTree objects.  It's helpful if
 you want to operate on a tree but you don't want to keep a reference to it.
 Example:

 \code
   // the following makes a tree for the <ul id="tree-id"> element
   var tree = new Zapatec.BasicTree("tree-id");
   // ... later
   var existing_tree = Zapatec.BasicTree.all("tree-id");
   // and now we can use \b existing_tree the same as we can use \b tree
   // the following displays \b true
   alert(existing_tree == tree);
 \endcode

 So in short, this variable remembers values returned by "new
 Zapatec.BasicTree(...)" in case you didn't.
   
   </UL>
   <HR>
   


<!-- ============ FIELD DETAIL END =========== -->

    <!-- ========= CONSTRUCTOR DETAIL START ======== -->

<A NAME="constructor_detail"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
   <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
      <TD COLSPAN=1>
      <FONT SIZE="+2"><B>Constructor Detail</B></FONT>
      </TD>
   </TR>
</TABLE>

<A NAME="Zapatec.BasicTree()"><!-- --></A><H3>
Zapatec.BasicTree</H3>
<PRE><B>Zapatec.BasicTree</B>(el, config)</PRE>


<UL>
   The Zapatec.BasicTree object constructor.  Pass to it the ID of an UL element (or
 a reference to the element should you have it already) and an optional
 configuration object.  This function creates and initializes the tree widget
 according to data existent in the nested list, and applies the configuration
 specified.

 The configuration object may contain the following options (the following
 shows default values):

 \code
 {
    hiliteSelectedNode : true,     // boolean
    compact            : false,    // boolean
    dynamic            : false,    // boolean
    initLevel          : false,    // false or number
    defaultIcons       : null      // null or string
 }
 \endcode

 - hiliteSelectedNode -- if \b false is passed, the tree will not highlight
   the currently selected node.
 - compact -- if \b true is passed the tree will work in a "compact" mode; in
   this mode it automatically closes sections not relevant to the current
   one.
 - dynamic -- if \b true is passed the tree will use the "dynamic initialization"
   technique which greatly improves generation time.  Some functionality is
   not available in this mode until all the tree was generated.  In "dynamic"
   mode the tree is initially collapsed and levels are generated "on the fly"
   as the end user expands them.  You can't retrieve nodes by ID (which
   implies you can't synchronize to certain nodes) until they have been
   generated.
 - initLevel -- when this is a numeric value, it specifies the maximum
   "expand level" that the tree will use initially.  Therefore, if for
   instance you specify 1 then the tree will be initially expanded one level.
   Pass here 0 to have the tree fully collapsed, or leave it \b false to have
   the tree fully expanded.
 - defaultIcons -- you can pass here a string.  If so, all tree items will
   get an additional TD element containing that string in the \b class
   attribute.  This helps you to include custom default icons without
   specifying them as IMG tags in the tree.  See our examples.
</UL>



   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>el</CODE> -  [string or HTMLElement] -- the UL element  
     </UL>
   
     <UL><CODE>config</CODE> -  [Object, optional] -- the configuration options   
     </UL>
   
   
   </UL>


<!-- Constructor return value(s) -->

<!-- End constructor return value(s) -->

<!-- ADDITIONAL ATTRIBUTES -->

<HR/>
<!-- END ADDITIONAL ATTRIBUTES  -->

<!-- ========= CONSTRUCTOR DETAIL END ======== -->


<!-- ============ METHOD DETAIL START ========== -->

<A NAME="method_detail"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
   <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
      <TD COLSPAN=1><FONT SIZE="+2">
         <B>Method Detail</B></FONT>
      </TD>
   </TR>
</TABLE>

<!-- One single method detail entry -->

   <A NAME="_getTree"><!-- --></A>
   <H3>_getTree</H3>
   <PRE>Object <B>_getTree</B>(tree_id, dont_call)</PRE>
   
      <UL>\internal This function is used when "dynamic initialization" is on.  It
 retrieves a reference to a subtree if already created, or creates it if it
 wasn't yet and \b dont_call is \b false (returns null in that case).</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>tree_id</CODE> -  [string] the ID of the subtree  
      </UL> 
   
     <UL><CODE>dont_call</CODE> -  [boolean] pass true here if you don't want the subtree to be created    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   
   <UL>
   <B>Returns:</B>
        <UL>
        reference to the tree if it was found or created, null otherwise. 
        </UL>
   </UL>
   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="appendChild"><!-- --></A>
   <H3>appendChild</H3>
   <PRE>void <B>appendChild</B>(parent, newChild, atStart)</PRE>
   
      <UL>Append a child to the start or end of the given parent.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>parent</CODE> -    [HTMLElement] -- reference to a tree node (either as a node at top level or at a subtree level) the new child going to be appended to in the tree.  
      </UL> 
   
     <UL><CODE>newChild</CODE> -  [HTMLElement] -- reference to an HTML element created of type LI, to which futher HTML elements such UL and LI can be included to generate subtrees.  
      </UL> 
   
     <UL><CODE>atStart</CODE> -   [boolean, optional] -- true if the child going to be added at the start of the parent.     
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="collapseAll"><!-- --></A>
   <H3>collapseAll</H3>
   <PRE>void <B>collapseAll</B>()</PRE>
   
      <UL>Call this function to collapse all items in the tree.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="createItem"><!-- --></A>
   <H3>createItem</H3>
   <PRE>Object <B>createItem</B>(li, parent, next_li, level, atStart)</PRE>
   
      <UL>\internal This function walks through a LI element and creates the HTML
 elements associated with that tree item.  When it encounters an UL element
 it calls createTree() in order to create the item's subtree.  This function
 may also call item_addIcon() in order to add the +/- buttons or icons
 present in the item definition as IMG tags, or item_addDefaultIcon() if the
 tree configuration specifies "defaultIcons" and no IMG tag was present.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>li</CODE> -  [HTMLElement] -- reference to the LI element  
      </UL> 
   
     <UL><CODE>parent</CODE> -  [HTMLElement] -- reference to the parent element where the HTML elements should be created  
      </UL> 
   
     <UL><CODE>next_li</CODE> -  [HTMLLiElement] -- reference to the next LI element, if this is not the last one  
      </UL> 
   
     <UL><CODE>level</CODE> -  [integer] -- the level of this item in the main tree  
      </UL> 
   
     <UL><CODE>atStart</CODE> -  [HTMLElement optional] -- reference to the element DIV with a TABLE object that represents the child following the new child added or inserted    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   
   <UL>
   <B>Returns:</B>
        <UL>
        [HTMLElement] -- a reference to a DIV element holding the HTML elements of the created item 
        </UL>
   </UL>
   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="createTree"><!-- --></A>
   <H3>createTree</H3>
   <PRE>Object <B>createTree</B>(list, parent, level)</PRE>
   
      <UL>\internal Function that creates a (sub)tree.  This function walks the UL
 element, computes and assigns CSS class names and creates HTML elements for
 a subtree.  Each time a LI element is encountered, createItem() is called
 which effectively creates the item.  Beware that createItem() might call
 back this function in order to create the item's subtree. (so createTree and
 createItem form an indirect recursion).</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>list</CODE> -  [HTMLElement] -- reference to the UL element  
      </UL> 
   
     <UL><CODE>parent</CODE> -  [HTMLElement] -- reference to the parent element that should hold the (sub)tree  
      </UL> 
   
     <UL><CODE>level</CODE> -  [integer] -- the level of this (sub)tree in the main tree.   
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   
   <UL>
   <B>Returns:</B>
        <UL>
        id -- the (sub)tree ID; might be automatically generated. 
        </UL>
   </UL>
   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="destroy"><!-- --></A>
   <H3>destroy</H3>
   <PRE>void <B>destroy</B>()</PRE>
   
      <UL>Destroys the tree.  Removes all elements.  Does not destroy the Zapatec.BasicTree
 object itself (actually there's no proper way in JavaScript to do that).</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="expandAll"><!-- --></A>
   <H3>expandAll</H3>
   <PRE>void <B>expandAll</B>()</PRE>
   
      <UL>Call this function to expand all items in the tree.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="getParent"><!-- --></A>
   <H3>getParent</H3>
   <PRE>Object <B>getParent</B>(id, mode)</PRE>
   
      <UL>Call to get the parent to append, insert or remove a child either at start or end position or in between two nodes of the (sub-)tree.

 For insert, if the user selects a tree-item that represents the root node of a subtree, then the new child will be inserted outside the subtree, 
 i.e. exactly before the root node of the subtree. However, if the user selects the node that represents one of the children in the subtree,
 then the new child will be inserted in the subtree under the root.
 For remove, if the user selects the root node of a subtree, the root node including its children will be removed. If the user selects a node that is not
 a root node of a subtree, then only that node will be deleted.
 In the implementation, the p will first retrieve the subtree from Tree.trees. But this is just the object that encapsulates the subtree, not the root of the
 entire subtree. For insert and remove,</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>id</CODE> -  	 [String] -- id of the parent the new child will be added to or inserted before/at.  
      </UL> 
   
     <UL><CODE>mode</CODE> -    [String optional] -- "I" is for inserting a child node. "R" is for removing a child node.
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="init"><!-- --></A>
   <H3>init</H3>
   <PRE>void <B>init</B>(el, config)</PRE>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="insertBefore"><!-- --></A>
   <H3>insertBefore</H3>
   <PRE>void <B>insertBefore</B>(newChild, refChild)</PRE>
   
      <UL>A new child can be inserted between two nodes/children or before one node /children at the same tree level. 
 Inserting the new child before the first node of a tree is allowed but not allowed 
 after the last node of the tree, i.e. end of the tree, except before the last node.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>newChild</CODE> -  [HTMLElement] -- New child node to be inserted into the tree  
      </UL> 
   
     <UL><CODE>refChild</CODE> -  [HTMLElement] -- Reference to the child node which the new child node will be inserted before    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="item_addDefaultIcon"><!-- --></A>
   <H3>item_addDefaultIcon</H3>
   <PRE>void <B>item_addDefaultIcon</B>(item, className)</PRE>
   
      <UL>\internal This function adds a TD element having a certain class attribute
 which helps having a tree containing icons without defining IMG tags for
 each item.  The class name will be "tgb icon className" (where "className"
 is the specified parameter).  Further, in order to customize the icons, one
 should add some CSS lines like this:

 \code
  div.tree-item td.customIcon {
    background: url("themes/img/fs/document2.png") no-repeat 0 50%;
  }
  div.tree-item-expanded td.customIcon {
    background: url("themes/img/fs/folder-open.png") no-repeat 0 50%;
  }
  div.tree-item-collapsed td.customIcon {
    background: url("themes/img/fs/folder.png") no-repeat 0 50%;
  }
 \endcode

 As you can see, it's very easy to customize the default icons for a normal
 tree item (that has no subtrees) or for expanded or collapsed items.  For
 the above example to work, one has to pass { defaultIcons: "customIcon" } in
 the tree configuration object.

 This function does nothing if the \b className parameter has a false logical
 value (i.e. is null).</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>item</CODE> -  [HTMLElement] -- reference to the DIV element holding the item  
      </UL> 
   
     <UL><CODE>className</CODE> -  -- a string containing the additional class name    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="item_addIcon"><!-- --></A>
   <H3>item_addIcon</H3>
   <PRE>void <B>item_addIcon</B>(item, img)</PRE>
   
      <UL>\internal This function does different things, depending on whether the \b
 img parameter is passed or not.  If the \b img is passed, then this function
 adds it as an icon for the given item.  If not passed, this function creates
 a "+/-" button for the given item.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>item</CODE> -  [HTMLElement] -- reference to the DIV holding the item elements  
      </UL> 
   
     <UL><CODE>img</CODE> -  [HTMLImgElement, optional] -- reference to an IMG element; normally one found in the <LI>    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="itemClicked"><!-- --></A>
   <H3>itemClicked</H3>
   <PRE>void <B>itemClicked</B>(item_id)</PRE>
   
      <UL>This function gets called from a global event handler when some item was
 clicked.  It selects the item and toggles it if it has a subtree (expands or
 collapses it).</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>item_id</CODE> -  [string] -- the item ID    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="makeNode"><!-- --></A>
   <H3>makeNode</H3>
   <PRE>Object <B>makeNode</B>(html, type)</PRE>
   
      <UL>Call this function to create a html element with the optional element type specified.
 By default, it is a <LI> element.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>html</CODE> -  [string, optional] -- html of the node; may include <UL>, <LI> elements; user is responsible for the content of the html  
      </UL> 
   
     <UL><CODE>type</CODE> -  [string, optional] -- type of the node to be created
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="onItemSelect"><!-- --></A>
   <H3>onItemSelect</H3>
   <PRE>void <B>onItemSelect</B>()</PRE>
   
      <UL>Third party code can override this member in order to add an event handler
 that gets called each time a tree item is selected.  It receives a single
 string parameter containing the item ID.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="removeChild"><!-- --></A>
   <H3>removeChild</H3>
   <PRE>void <B>removeChild</B>(oldChild)</PRE>
   
      <UL>An old child node in the tree can be removed at any level.
 If the old child node happens to be the root of a subtree, 
 then the entire subtree including child node(s) under the root node will be removed.
 If the old child node is just an item node without any child node under it as children, 
 then the only node removed is the old child node.
 Once an item node or a subtree is removed, the node/subtree before and/or after the old 
 node will be joined together, sometimes with tree lines redrawn.
 The only limitations are that the root node of the top tree is not permitted for removal;
 the first child node found will be removed if there are more than one tree node with the same id.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>oldChild</CODE> -  [HTMLElement] -- Old child node to be removed from the tree where it can   be an item node without children or a subtree including the old child node as the root.    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="sync"><!-- --></A>
   <H3>sync</H3>
   <PRE>void <B>sync</B>(item_id)</PRE>
   
      <UL>Call this function to synchronize the tree to a given item.  This means that
 all items will be collapsed, except that item and the full path to it.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>item_id</CODE> -  [string] -- the ID of the item to sync to.    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="toggleAll"><!-- --></A>
   <H3>toggleAll</H3>
   <PRE>void <B>toggleAll</B>()</PRE>
   
      <UL>Call this function to toggle all items in the tree.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="toggleItem"><!-- --></A>
   <H3>toggleItem</H3>
   <PRE>Object <B>toggleItem</B>(item_id, state)</PRE>
   
      <UL>This function toggles an item if the \b state parameter is not specified.
 If \b state is \b true then it expands the item, and if \b state is \b false
 then it collapses the item.</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>item_id</CODE> -  [string] -- the item ID  
      </UL> 
   
     <UL><CODE>state</CODE> -  [boolean, optional] -- the desired item state    
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   
   <UL>
   <B>Returns:</B>
        <UL>
        a reference to the item element if found, null otherwise 
        </UL>
   </UL>
   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>

   <A NAME="!s!onItemToggle"><!-- --></A>
   <H3>onItemToggle</H3>
   <PRE>&lt;static&gt; void <B>onItemToggle</B>()</PRE>
   
      <UL>\internal This is a global event handler that gets called when a tree item
 is clicked.  Don't override! ;-)</UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <!-- METHOD PARAMETERS END -->

   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>



<!-- ============ METHOD DETAIL END ========== -->

<!-- ========= END OF CLASS DATA ========= -->

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_bottom"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=3 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_bottom_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-summary.html"><FONT CLASS="NavBarFont1"><B>Overview</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">  <A HREF="../overview-summary-tree.js.html"><FONT CLASS="NavBarFont1"><B>File</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"> &nbsp;<FONT CLASS="NavBarFont1Rev"><B>Class</B></FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <!--TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1"-->    <!--A HREF="deprecated-list.html"--><!--FONT CLASS="NavBarFont1">Deprecated</FONT--><!--/A--><!--&nbsp;</TD-->
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../index-all.html"><FONT CLASS="NavBarFont1"><B>Index</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../help-doc.html"><FONT CLASS="NavBarFont1"><B>Help</B></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD ALIGN="right" VALIGN="top" ROWSPAN=3><EM>
<B>Zapatec Utils</B>
</EM>
</TD
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;<A HREF="../Zapatec/AccordionTabs.html"><B>PREV CLASS</B></A><!-- 
   NEXT CLASS 
-->
&nbsp;<A HREF="../Zapatec/Button.html"><B>NEXT CLASS</B></A></FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="../index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="" TARGET="_top"><B>NO FRAMES</B></A>  &nbsp;
&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
<TR>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
  SUMMARY:&nbsp;<A HREF="#field_summary">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_summary">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_summary">METHOD</A></FONT></TD>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
DETAIL:&nbsp;<A HREF="#field_detail">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_detail">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_detail">METHOD</A></FONT></TD>
</TR>
</TABLE>

<!-- =========== END OF NAVBAR =========== -->

<HR>
<FONT SIZE="-1">

</FONT>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu May 21 12:19:24 2009</div>
</BODY>
</HTML>
